<template>
	<view class="page-body">
		<view class="actImg">
			<!-- <image :src="activitData.detailImg1 || activitData.detailImg2 || activitData.detailImg3"></image> -->
			<swiper
				:indicator-dots='false' 	
				circular
				autoplay
				interval=3000
				:current='current'
				:style="{height:swiperHeight}"
				@change='changeImg'
			>
				<swiper-item v-for="(item,index) in swipers" :key="index">
					<image :src="item" :data-index='index'  mode="aspectFit" @load='handleImg' lazy-load='true' :style="{height:imgList[current]}"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="actCom">
			<view class="actInfo">
				<view class="actName">{{activitData.activityName}}</view>
				<view class="actType">{{activitData.activityDivision}}/{{activitData.activityType}}</view>
				<view class="actAsk" @click="isActAsk = true">
					<image class="tipsIcon" src="@/static/images/tips_icon.png"></image>活动要求
				</view>
			</view>
			
			<view class="actContent_box">
				<view class="title_box">
					<image class="tipsIcon" src="@/static/images/notes_icon.png"></image>活动时间及地点
				</view>
				<block >
					<view class="addressTime">
						<image class="iconImg addressIcon" src="@/static/images/address_icon.png"></image>{{activitData.activityProvince}}{{activitData.activityCity}}{{activitData.activityArea}}{{activitData.areaDetail}}
					</view>
				</block>
				
				<view class="addressTime">
					<image class="iconImg" src="@/static/images/time_icon.png"></image>{{activitData.startTime | getDateTime}}  至  {{activitData.endTime | getDateTime}}
				</view>
			
				<block v-if="activitData.activityType=='见面礼'">
					<view class="addressTime" v-if="activitData.couponId">
						<image class="iconImg addressIcon" src="@/static/images/coupon_icon.png"></image>剩余{{activitData.canUseNum || 0}}张优惠券可领取
					</view>
					<view class="title_box">
						<image class="tipsIcon" src="@/static/images/notes_icon.png"></image>二维码
					</view>
					
					<view class="scanCode_box">
						<image class="qrCodeImg" :src="qrImage"></image>
						<image class="scanCodeBgImg" src="@/static/images/scanCode_bg.png"></image>
						<view class="scanTips">
							扫描二维码<br />领取见面礼
						</view>
					</view>
				</block>
				<view class="title_box actContent_title" v-if="activitData.activityContent">
					<image class="tipsIcon" src="@/static/images/notes_icon.png"></image>
					活动内容
				</view>
				
				<view class="actContent" v-html="activitData.activityContent"></view>
			</view>
			<block v-if="userInfo.role == '148' || userInfo.role == '150'">
				<!-- <view class="share_btn" v-if="activitData.activityType !='见面礼'" @click="shareApp"> -->
				<view class="share_btn" v-if="activitData.activityType !='见面礼'" @click="showShare=true">
					分享
				</view>
			</block>
			<u-popup v-model="showShare" mode="bottom" border-radius="15" closeable height="21%">
				<view class="fenxTitle">
					分享到
				</view>
				<scroll-view scroll-x="true" style="margin-top: 40rpx;">
					<view style="display: flex;">
						<view class="wrap" style="width: 100%">
							<u-row gutter="24" align="center">
								<u-col span="3" text-align="center">
									<view style="display: flex;flex-direction: column;align-items: center;" @click="shareApp(1)">
										<u-image width="80rpx" height="80rpx" src="@/static/images/weixin.png"></u-image>
										<view class=""  style="color: #43425D;">微信好友</view>
									</view>
								</u-col>
<!-- 								<u-col span="2" text-align="center">
									<view style="display: flex;flex-direction: column;align-items: center;" @click="shareApp(2)">
										<u-image width="80rpx" height="80rpx" src="@/static/images/pengyouquan.png"></u-image>
										<view class=""  style="color:#43425D;">朋友圈</view>
									</view>
								</u-col> -->
							</u-row>
						</view>			
					</view>
				</scroll-view>
			</u-popup>
			<view class="popup" v-if="isActAsk">
				<!-- 遮罩层 -->
				<view class="mask" @click="isActAsk=false"  @touchmove.stop.prevent="moveHandle"></view>
				
				<view class="popup-content">
					<view class="popup-close" @click.stop="isActAsk = false">
						<image src="@/static/images/closePop_icon.png"></image>
					</view>
					
					<view class="popTitle">
						<image class="tipsIcon" src="@/static/images/notes_icon.png"></image>
						<text>活动要求</text>
						<image class="tipsIcon" src="@/static/images/notes_icon.png"></image>
					</view>
					
					<view class="actAskContent">
						{{activitData.activityRequire}}
					</view>
				</view>
			</view>
				
		</view>
	
	
	
	</view>
</template>

<script>

	import {
		getActivityInfo,
		getQRImage,
		getUnlimitedCode
	} from '@/service/api/api.js';
	import helper from '@/common/helper.js' //静态变量
	import { addActivityShareLog } from "@/service/api/api.js"

	export default {
		components: {
			
		},
		data() {
			return {
				userInfo: {},
				isActAsk: false,
				activitData:{},
				activityId:'',
				qrImage: '',
				swipers:[],
				imgList:[] /*图片的高度列表*/,
				current:0,
				swiperHeight:'',
				showShare:false,
			}
		},
		filters:{
			getDateTime(val){
				if(val){
					return val.split('T')[0]
				}else{
					return ''
				}
				
			}
		},
		onLoad(option) {
			this.activityId=option.activityId
			try {
				this.userInfo = uni.getStorageSync('user_info')
			} catch (e) {
				console.log(e)
			}

			this.init()
		},
		onReady() {

		},
		mounted() {
			this.getActivityInfoFun()
		},
		created() {
			this.swipers=[]
		},
		methods: {
			init() {

			},
			async getActivityInfoFun(){
			  if (!this.activityId) return
			  let res= await getActivityInfo({activityId:this.activityId })
			  if(res.data.code==0){
				res.data.data.activityContent = res.data.data && res.data.data.activityContent ? res.data.data.activityContent.replace(/<img/g,"<img style='display:block;max-width:80%;height:auto;margin: 0 auto;'") : '';
				
				res.data.data.startTime = res.data.data && res.data.data.startTime ? res.data.data.startTime.substr(0, 10) : ''
				res.data.data.endTime = res.data.data && res.data.data.endTime ? res.data.data.endTime.substr(0, 10) : ''
				this.activitData = res.data.data
				// this.activitData.detailImg1 || this.activitData.detailImg2 || this.activitData.detailImg3
				if(!Object.is(this.activitData.detailImg1,null) && !Object.is(this.activitData.detailImg1,'')) this.swipers.push(this.activitData.detailImg1)
				if(!Object.is(this.activitData.detailImg2,null) && !Object.is(this.activitData.detailImg2,'')) this.swipers.push(this.activitData.detailImg2)
				if(!Object.is(this.activitData.detailImg3,null) && !Object.is(this.activitData.detailImg3,'')) this.swipers.push(this.activitData.detailImg3)
				console.log(this.swipers,'--------------轮播图')
	
				// if(this.activitData.activityType=='见面礼') {
					this.get_qrImage()
				// }
			  }
			  
			},
			handleImg(e){
				 let winWid = uni.getSystemInfoSync().windowWidth;              
				  let imgh = e.detail.height;　　　　　　　　　　　　　　　　
				  let imgw = e.detail.width;
				  let index=e.currentTarget.dataset.index
				  let swiperH = winWid * imgh / imgw +'px'
				  this.imgList[index]=swiperH
				  this.swiperHeight=swiperH
			},
			changeImg(e){
				this.current=e.detail.current
				this.swiperHeight=this.imgList[this.current]
				
			},
			get_qrImage() {
				let scene = `1,${this.userInfo.role},${this.userInfo.userId},${this.activityId}`
				console.log(`pages/main/sharePage/index?scene=${scene}`)
				
				// getQRImage({
				// 	url:'pages/main/sharePage/index',
				// 	param: scene,
				// }).then(res => {
				// // 	let blob = new Blob([res.data],{type: 'image/png'})
				// // 　　this.blobToDataURL(blob,(res)=>{
				// // // 　　　　console.log(res)
				// // 		this.qrImage = res
				// // 　　})
				// 	let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
				// 	this.qrImage = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
					
				// 	// console.log(this.qrImage);
				// })
				
				getUnlimitedCode({
					path: 'pages/main/sharePage/index',
					scene
				}).then(res => {
					if(res.data.code == '0') {
						console.log(res.data.data)
						this.qrImage = res.data.data
					}
					// console.log(this.qrImage);
				})
			},
			blobToDataURL(blob, callback) {
				let file = new FileReader();
				file.onload = function(e) {
				  callback(e.target.result);
				}
				file.readAsDataURL(blob);
			},
			/* 禁止蒙版下的页面滚动 */
			moveHandle(){},
			async shareApp(type){
				let res=await addActivityShareLog({activityId:this.activityId, userId: this.userInfo.userId})
				// console.log(res)
				let scene = `1,${this.userInfo.role},${this.userInfo.userId},${this.activityId}`
				// console.log(`pages/main/sharePage/index?scene=${scene}`)
				// console.log(JSON.stringify(this.activitData))
				// console.log(this.activitData,res)

				switch (type){
					case 1:
					// 图片类型
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 2,
							imageUrl: this.qrImage,
							success: function (res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function (err) {	
								console.log("fail:" + JSON.stringify(err));
							}
						});
						break;
					case 2:
						let place=this.activitData.activityProvince+this.activitData.activityCity+this.activitData.activityArea+this.activitData.areaDetail
						let time=this.activitData.startTime+ '至'+this.activitData.endTime
						let acdata={
							activityName:this.activitData.activityName,
							detailImg1:this.activitData.detailImg1,
							textContent:this.activitData.textContent,
							place,
							time			
						}
					    // 分享到 朋友圈
						// uni.redirectTo({
						// 	url:'/pages/activity/shareActivity1/index?editItem='+encodeURIComponent(JSON.stringify(acdata))
						// })
						break;
				}
				// 分享到 朋友圈
				// uni.redirectTo({
				// 	url:'/pages/activity/shareActivity1/index?editItem='+encodeURIComponent(JSON.stringify(acdata))
				// })
				// 图片类型
				// uni.share({
				//     provider: "weixin",
				//     scene: "WXSceneSession",
				//     type: 2,
				//     imageUrl: this.qrImage,
				//     success: function (res) {
				//         console.log("success:" + JSON.stringify(res));
				//     },
				//     fail: function (err) {	
				//         console.log("fail:" + JSON.stringify(err));
				//     }
				// });
				// 小程序卡片类型 
				// if(this.activitData.shareImg1 || this.activitData.shareImg2 || this.activitData.shareImg3){
				// 	console.log(this.activitData.shareImg1 || this.activitData.shareImg2 || this.activitData.shareImg3)
				// 	uni.share({
				// 	    provider: 'weixin',
				// 	    scene: "WXSceneSession",
				// 	    type: 5,
				// 	    imageUrl: this.activitData.shareImg1 || this.activitData.shareImg2 || this.activitData.shareImg3 || '',
				// 		title: this.activitData.shareTitle || '',
				// 		summary:this.activitData.shareDesc || '',	   
				// 	    miniProgram: {
				// 	        id: 'gh_55fb6944e32f',
				// 	        path: `pages/main/sharePage/index?scene=${scene}`,
				// 	        type: helper.isMiniProgramType,
				// 			webUrl: 'http://uniapp.dcloud.io'
				// 	    },
				// 	    success: ret => {
				// 	        console.log(JSON.stringify(ret));
				// 	    }
				// 	});
				// }else{
				// 	uni.showToast({
				// 		title: "暂无分享图片",
				// 		icon: "none"
				// 	})
				// }

				
				// 图文类型
				// uni.share({
				//     provider: "weixin",
				//     scene: "WXSceneSession",
				//     type: 0,
				//     href: "http://uniapp.dcloud.io/",
				// 		title: this.activitData.shareTitle || '',
				// 		summary:this.activitData.shareDesc || '',
				//     imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
				//     success: function (res) {
				//         console.log("success:" + JSON.stringify(res));
				//     },
				//     fail: function (err) {
				//         console.log("fail:" + JSON.stringify(err));
				//     }
				// });
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './index.scss';
	/deep/ .u-close--top-right{
		top: 12rpx;
		right: 22rpx;
	}
	.fenxTitle{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #43425D;
		margin-top: 12rpx;
		margin-left: 26rpx;
	}
</style>

<style lang="scss">
	// .actContent >>>img {
	// 	display: block;
	// 	width: 80%;
	// 	max-width: 80%;
	// 	margin: 0 auto;
	// }
</style>